<template>
  <el-card class="middle-view">
    <template #header>
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>

      <div class="right">
        <el-radio-group v-model="time1" size="small">
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="本周"></el-radio-button>
          <el-radio-button label="本月"></el-radio-button>
          <el-radio-button label="今年"></el-radio-button>
        </el-radio-group>

         <el-date-picker
          size="small"
          value-format="yyyy-MM-dd"
          v-model="time2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      
    </template>
    <div class="content">
      <v-chart :option="getOption()"></v-chart>
      <div class="rank-list">
        <div class="title">门店{{activeIndex==='1' ? '销售额' : '访问量'}}排名</div>
        <div class="list">
          <div class="item" v-for="item in rankList" :key="item.no">
            <div class="no" :class="{top: item.no<=3}">{{item.no}}</div>
            <div class="name">{{item.name}}</div>
            <div class="count">{{item.count}}</div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'MiddleView',

  data () {
    return {
      activeIndex: '2',
      time1: '本周',
      time2: [], // 收集选择的2个日期值
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },

  computed: {
    /* 
     "orderFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  "orderFullYear": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
  "userFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  "userFullYear": [110, 120, 90, 220, 175, 212, 192, 95, 88, 120, 250, 310],
    "orderRank": [
    {
    "no": 1,
    "name": "肯德基",
    "count": "323,234"
  }]

   "userRank": [
    {
    "no": 1,
    "name": "肯德基",
    "count": "323,234"
  }]
  
    */
    ...mapState({
      orderFullYearAxis: state => state.data.reportData.orderFullYearAxis || [],
      orderFullYear: state => state.data.reportData.orderFullYear || [],
      userFullYearAxis: state => state.data.reportData.userFullYearAxis || [],
      userFullYear: state => state.data.reportData.userFullYear || [],
      
      orderRank: state => state.data.reportData.orderRank || [],
      userRank: state => state.data.reportData.userRank || [],
    }),

    rankList () {
      return this.activeIndex==='1' ? this.orderRank : this.userRank
    }
  },

  methods: {
    // 点击切换menuItem时同步更新activeIndex
    handleSelect (value) {
      this.activeIndex = value
    },

    getOption () {
      const text = this.activeIndex==='1' ? '销售额趋势' : '访问量趋势'
      const xAxisData = this.activeIndex==='1' ? this.orderFullYearAxis: this.userFullYearAxis
      const data = this.activeIndex==='1' ? this.orderFullYear : this.userFullYear

      return {
        title: {
          text,
          textStyle: {
            fontSize: 16
          },
          left: 10
        },
        xAxis: {
          data: xAxisData,
          axisTick: {  // 刻度线与文字对齐  ==> 刻度线在柱的中间
            alignWithLabel: true
          },
          
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: "rgba(198, 40, 40, 1)"
            }
          }
        },
        series: {
          type: 'bar',
          data,
          barWidth: '40%',
        },
        tooltip: {},

        color: '#3398DB',
        grid: {
          left: 50,
          top: 50,
          right: 50,
          bottom: 50,
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .middle-view {
    margin-top: 20px;
    ::v-deep.el-card__header {
      border-bottom: none;
      padding: 0 20px;
      position: relative;

      .right {
        position: absolute;
        right: 20px;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
        .el-date-editor {
          margin-left: 20px;
        }
      }
    }

    .content {
      height: 270px;
      display: flex;
      .echarts {
        flex: 5;
      }
      .rank-list {
        flex: 2;
        height: 100%;
        .title {
          font-size: 16px;
          margin: 10px 0;
        }
        .list {
          .item {
            display: flex;
            align-items: center;
            height: 20px;
            margin: 6px 20px 6px 0;
            font-size: 14px;

            .no {
              width: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .top {
              background: #000;
              border-radius: 10px;
              color: #fff;
            }
            .name {
              margin-left: 15px;
            }
            .count {
              flex: 1;
              text-align: right;
            }
          }
        }
      }
    }
  }
</style>
